<!doctype html>
<html>
    <head>
        <!-- meta -->
        <!-- meta -->
        <title>API</title>
        <!-- css -->
        <link href="../styles/examples.css" rel="stylesheet"/>
        <link href="../../source/styles/nova.common.css" rel="stylesheet"/>
        <link href="../../source/styles/nova.css" rel="stylesheet"/>
        <!-- css -->
        <!-- script -->
        <script src="../js/jquery.js"></script>
        <script src="../../source/js/nova.core.js"></script>
        <script src="../../source/js/nova.fx.js"></script>
        <script src="../../source/js/nova.treeview.js"></script>
        <!-- script -->
    </head>
    <body>
        <!-- nav -->
        <!-- nav -->
        <!-- description -->
        <!-- description -->
        <div id="example" class="n-content">

            <div class="configuration">
                <span class="configHead">Configuration</span>
                <span class="configTitle">API Functions</span>
                <ul class="options">
                    <li>
                        <button class="n-button" id="disableNode">Disable node</button>
                    </li>
                    <li>
                        <button class="n-button" id="enableAllNodes">Enable all nodes</button>
                    </li>
                    <li>
                        <button class="n-button" id="removeNode">Remove node</button>
                    </li>
                    <li>
                        <button class="n-button" id="expandAllNodes">Expand all nodes</button>
                    </li>
                    <li>
                        <button class="n-button" id="collapseAllNodes">Collapse all nodes</button>
                    </li>
                    <li>
                        <input name="text" id="text" value="Node"/>
                        <button class="n-button" id="appendNodeToSelected">Append node</button>
                    </li>
                </ul>
            </div>

            <div id="treeview"></div>

            <script>
                $(document).ready(function() {
                    var treeview = $("#treeview").novaTreeView({
                            dataSource: [
                                { text: "Item 1", expanded: true, items: [
                                    { text: "Item 1.1" },
                                    { text: "Item 1.2" },
                                    { text: "Item 1.3" }
                                ] },
                                { text: "Item 2", items: [
                                    { text: "Item 2.1" },
                                    { text: "Item 2.2" },
                                    { text: "Item 2.3" }
                                ] },
                                { text: "Item 3" }
                            ]
                        }).data("novaTreeView"),
                        append = function(e) {
                            if (e.type != "keypress" || nova.keys.ENTER == e.keyCode) {
                                var selectedNode = treeview.select();

                                // passing a falsy value as the second append() parameter
                                // will append the new node to the root group
                                if (selectedNode.length == 0) {
                                    selectedNode = null;
                                }

                                treeview.append({
                                    text: $("#text").val()
                                }, selectedNode);
                            }
                        };


                    $("#disableNode").click(function() {
                        var selectedNode = treeview.select();

                        treeview.enable(selectedNode, false);
                    });

                    $("#enableAllNodes").click(function() {
                        var selectedNode = treeview.select();

                        treeview.enable(".n-item");
                    });

                    $("#removeNode").click(function() {
                        var selectedNode = treeview.select();

                        treeview.remove(selectedNode);
                    });

                    $("#expandAllNodes").click(function() {
                        treeview.expand(".n-item");
                    });

                    $("#collapseAllNodes").click(function() {
                        treeview.collapse(".n-item");
                    });

                    $("#appendNodeToSelected").click(append);
                    $("#text").keypress(append);
                });
            </script>

        </div>
        <!-- tools -->
        <!-- tools -->
    </body>
</html>


